<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <script>

        //let const不会存在变量提升
        // console.log(d);
        let d = 10;
        
        //es5
        //var 没有作用域概念，for里面的语句都是修改var的变量
        var arr = document.getElementsByTagName('button');
        for (var i = 0; i < arr.length; i++) {
            arr[i].addEventListener('click', function () {
                console.log('第' + i + '按钮被点击了');
            })
        }
        //es6
        //let 有作用域概念，每一个循环都有自己的let变量 循环一次，就会在 { } 所在的块级作用域中，重新定义一个新的变量 a
        const arr2 = document.getElementsByTagName('button');
        for (let a = 0; a < arr2.length; a++) {
            arr2[a].addEventListener('click', function () {
                console.log('第' + a + '个按钮被点击了');
            })
        }


    </script>
</body>

</html>